<template>
  <div class="item-list-out">
    <el-dropdown v-for="x in data" :key="x.id" @command="handleCommand">
      <span class="el-dropdown-link">
        {{x.name}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="c in x.children" :key="c.id" :command="c.id">
          <span>{{c.name}}</span>
          <top_menu :data="c.children"></top_menu>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "top_menu",
  components: {
    'top-menu': () => import('@/components/menu/top_menu.vue')
  },
  props: {
    data: Array,
  },
  // mounted() {
  //   console.log(this.data)
  // },
  methods: {
    handleCommand(command){
      this.$emit('menuClick',command)
    }
  }
}
</script>

<style scoped lang="scss">
.item-list-out {
  display: flex;
  justify-content: end;
  padding-right: 50px;
  .el-dropdown{
    margin-right: 20px;
  }
}
</style>
